<template>
  <u-dialog :title="title" :show.sync="show" :auto-close="false" :footer="false" @cancel="cancel" @confirm="confirm" width="1080px">
    <el-form ref="dataForm" :rules="rules" :model="dataForm" label-width="120px">
      <el-tabs v-model="active">
        <el-tab-pane label="基础信息" name="first">

          <el-descriptions title="员工信息" :column="2" border >
            <el-descriptions-item label="工号">
              {{ dataForm.jobNo }}
            </el-descriptions-item>
            <el-descriptions-item label="头像">
              <el-image style="width: 80px; height: 80px;" :src="dataForm.avatar" :preview-src-list="handleThumbs(dataForm.avatar)" />
            </el-descriptions-item>
            <el-descriptions-item label="姓名">
              {{ dataForm.name }}
            </el-descriptions-item>
            <el-descriptions-item label="民族">
              {{ dataForm.nationality }}
            </el-descriptions-item>
            <el-descriptions-item label="手机">
              {{ dataForm.mobile }}
            </el-descriptions-item>
            <el-descriptions-item label="籍贯">
              {{ dataForm.bornPlace }}
            </el-descriptions-item>
            <el-descriptions-item label="生日">
              {{ dataForm.birthday }}
            </el-descriptions-item>

            <el-descriptions-item label="身份证">
              {{ dataForm.idCard }}
            </el-descriptions-item>

            <el-descriptions-item label="性别">
              {{ dataForm.sex }}
            </el-descriptions-item>

            <el-descriptions-item label="身份证有效期">
              {{ dataForm.idCardValidity }}
            </el-descriptions-item>
            <el-descriptions-item label="年龄">
              {{ dataForm.age }}
            </el-descriptions-item>

            <el-descriptions-item label="户籍地址">
              {{ dataForm.bornAddress }}
            </el-descriptions-item>

            <el-descriptions-item label="邮箱">
              {{ dataForm.email }}
            </el-descriptions-item>

            <el-descriptions-item label="最高学历">
              {{ dataForm.highestDegree }}
            </el-descriptions-item>
            <el-descriptions-item label="入职时间">
              {{ dataForm.createTime }}
            </el-descriptions-item>
            <el-descriptions-item label="现住地址">
              {{ dataForm.province }}{{ dataForm.city }}{{ dataForm.area }}{{ dataForm.address }}
            </el-descriptions-item>

            <el-descriptions-item label="手册">
              {{ dataForm.manual? '已阅读，时间：' + dataForm.manualTime :'未阅读' }}
            </el-descriptions-item>

            <el-descriptions-item label="餐卡">
              {{ dataForm.mealCardNo }}
            </el-descriptions-item>
            <el-descriptions-item label="每月餐费标准">
              {{ dataForm.mealCost }}元
            </el-descriptions-item>
            <el-descriptions-item label="状态" :span="2">
              <el-tag v-if="dataForm.status === 0" type="warning">待入职</el-tag>
              <el-tag v-if="dataForm.status === 1" type="success">正常</el-tag>
              <el-tag v-if="dataForm.status === 2" type="info">离职</el-tag>
              <el-tag v-if="dataForm.status === 3" type="danger">锁定</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="支援天数" :span="2">
              {{ dataForm.endDays }}天
            </el-descriptions-item>
            <el-descriptions-item label="备注" :span="2">
              {{ dataForm.note }}
            </el-descriptions-item>
          </el-descriptions>

          <el-descriptions title="离职信息" :column="2" border style="margin-top: 20px" v-if="dataForm.status === 2">
            <el-descriptions-item label="离职时间">
              {{ dataForm.endTime }}
            </el-descriptions-item>
            <el-descriptions-item label="离职事由">
              {{ dataForm.endContent }}
            </el-descriptions-item>
          </el-descriptions>

          <el-descriptions title="紧急联络" :column="2" border style="margin-top: 20px" >
            <el-descriptions-item label="与本人关系">
              {{ dataForm.emergencyContactRelation }}
            </el-descriptions-item>
            <el-descriptions-item label="联络人">
              {{ dataForm.emergencyName }}
            </el-descriptions-item>
            <el-descriptions-item label="联络电话">
              {{ dataForm.emergencyMobile }}
            </el-descriptions-item>
          </el-descriptions>

          <el-descriptions title="公司信息" :column="2" border style="margin-top: 20px" >
            <el-descriptions-item label="公司名称">
              {{ dataForm.enterpriseName }}
            </el-descriptions-item>
            <el-descriptions-item label="公司编码">
              {{ dataForm.enterpriseNo }}
            </el-descriptions-item>
            <el-descriptions-item label="合同编号">
              {{ dataForm.contractNo }}
            </el-descriptions-item>
          </el-descriptions>

          <el-descriptions title="商户信息" :column="2" border style="margin-top: 20px" >
            <el-descriptions-item label="商户名称">
              {{ dataForm.merchantName }}
            </el-descriptions-item>
            <el-descriptions-item label="商户编码">
              {{ dataForm.merchantNo }}
            </el-descriptions-item>
            <el-descriptions-item label="商户楼层">
              {{ dataForm.floor }}
            </el-descriptions-item>
          </el-descriptions>

        </el-tab-pane>

        <el-tab-pane label="证件信息" name="fourth">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="身份证正面">
              <el-image style="width: 200px; height: 200px;" :src="dataForm.idCardFront" :preview-src-list="handleThumbs(dataForm.idCardFront)" />
            </el-descriptions-item>
            <el-descriptions-item label="身份证反面">
              <el-image style="width: 200px; height: 200px;" :src="dataForm.idCardBack" :preview-src-list="handleThumbs(dataForm.idCardBack)" />
            </el-descriptions-item>
            <el-descriptions-item label="身份证有效期">
              {{dataForm.idCardValidity}}
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>

        <el-tab-pane label="健康信息" name="fourth3">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="健康证正面">
              <el-image style="width: 200px; height: 200px;" :src="dataForm.healthCertificateFront" :preview-src-list="handleThumbs(dataForm.healthCertificateFront)" />
            </el-descriptions-item>
            <el-descriptions-item label="健康证反面">
              <el-image style="width: 200px; height: 200px;" :src="dataForm.healthCertificateBack" :preview-src-list="handleThumbs(dataForm.healthCertificateBack)" />
            </el-descriptions-item>
            <el-descriptions-item label="健康证有效期">
              {{dataForm.healthCertificateValidity}}
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>

        <el-tab-pane label="入职附件" name="fourth4">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="入职函">
              <el-image style="width: 200px; height: 200px;" :src="dataForm.createFile" :preview-src-list="handleThumbs(dataForm.createFile)" />
            </el-descriptions-item>
            <el-descriptions-item label="押金条">
              <el-image style="width: 200px; height: 200px;" :src="dataForm.depositFile" :preview-src-list="handleThumbs(dataForm.depositFile)" />
            </el-descriptions-item>
            <el-descriptions-item label="物品领用单">
              <el-image style="width: 200px; height: 200px;" :src="dataForm.receipt" :preview-src-list="handleThumbs(dataForm.receipt)" />
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>

        <el-tab-pane label="离职附件" name="fourth5">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="离职函">
              <el-image style="width: 200px; height: 200px;" :src="dataForm.endFile" :preview-src-list="handleThumbs(dataForm.endFile)" />
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>

      </el-tabs>

    </el-form>
  </u-dialog>
</template>

<script>
export default {
  name: 'Modal',
  model: {
    prop: 'show',
    event: 'changeShow'
  },
  props: {
    /** 是否弹框 */
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: data => {
        return ({})
      }
    }
  },
  data() {
    return {
      api: this.$u.api.PluginsGuide,
      title: '查看详情',
      dataForm: {},
      rules: {
        result: [
          { required: true, message: '请审批申请单', trigger: 'change' }
        ]
      },
      active: 'first'
    }
  },
  watch: {
    show(newVal, oldVal) {
      // 监听是否弹框,决定是否初始化数据
      // console.log(newVal + '---------------' + oldVal)
      if (newVal) {
        const d = {}
        this.dataForm = this.$u.deepMerge(d, this.data)
        // 清除表单验证状态
        const self = this
        self.$nextTick(() => {
          self.$refs['dataForm'].clearValidate()
        })
        // this.$nextTick(() => {
        //   if (this.$refs.dataForm) {
        //     this.$refs.dataForm.clearValidate()
        //   }
        // })
      }
    }
  },
  methods: {
    // 确认
    confirm() {
      this.$emit('confirm')
    },
    // 关闭或者取消
    cancel() {
      this.active = 'first'
      this.$emit('changeShow', false)
      this.$emit('cancel')
    },
    handleThumbs(thumb) {
      return thumb? thumb.split(',') : []
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-descriptions__title {
    font-size: 14px;
    font-weight: bold;
  }
}
</style>
